<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>-->
    <script src="/static/axios.min.js"></script>
    <link href="/static/my.css" rel="stylesheet" >
</head>
<body>
<script>
     function deletes(id){
        axios
            .get('http://localhost:8080/jpa/deleteJpa?id=' + id)
            .then(response => {
                alert(response.data)
                //删除完成后刷新列表
                window.location.reload()
            })
    }
    function update(id) {
        axios
            .get('http://localhost:8080/jpa/updateJpa?id=' + id+'&name='
                +document.getElementById(id).value)
            .then(response => {
                alert(response.data)
                //更新完成后刷新列表
                window.location.reload()
            })
    }
    function insert() {
        axios
            .get('http://localhost:8080/jpa/insertJpa?name=' + document.getElementById("name").value+'&sex='
                +document.getElementById("sex").value+"&classId="+document.getElementById("classId").value)
            .then(response => {
                alert(response.data)
                //插入完成后刷新列表
                window.location.reload()
            })
    }
    function search() {
        var searchName = document.getElementById("searchName").value
        var age = document.getElementById("age").value
        window.location.href = "http://localhost:8080/thymeleaf/stu?"+
		"searchName="+searchName+"&age="+age

    }
</script>
<div>
    <div>
        <input id="name" placeholder="请输入学生姓名" />
        <input id="sex" placeholder="请输入学生性别" />
        <input id="classId" type="number" placeholder="请输入学生班级ID" />
        <button onclick="insert()">插入学生信息</button>
    </div>
    <div>
        <input id="searchName" placeholder="请输入学生姓名2" th:value="${searchName}"/>
        <input id="age" placeholder="请输入学生年龄" />
        <button onclick="search()">查询学生信息</button>
    </div>
    <div style="display: flex;flex-direction: row;">
        <div style="width: 100px;" class="blue">ID</div>
        <div style="width: 100px;">
            头像
        </div>
        <div style="width: 100px;">姓名</div>
        <div style="width: 100px;">性别</div>
        <div style="width: 100px;">年龄</div>
        <div style="width: 100px;">班级ID</div>
    </div>
    <div th:each="item : ${list}" style="display: flex;flex-direction: row;">
        <div style="width: 100px;" th:text="${item.id}"></div>
        <div style="width: 100px;">
            <img th:src="${item.avater}"  style="width: 50px;height: 50px" >
        </div>
        <input style="width: 100px;" th:value="${item.name}" th:id="${item.id}"></input>
        <div style="width: 100px;" th:text="${item.sex}"></div>
        <div style="width: 100px;" th:text="${item.age}"></div>
        <div style="width: 100px;" th:text="${item.classId}"></div>
        <button th:onclick="|update(${item.id})|">更新</button>
        <button th:onclick="|deletes(${item.id})|">删除</button>
    </div>
</div>
</body>
</html>